<template>
	<div class="contain">
		<div class="contain-header">
			<el-form  label-width="50px" inline >
				<el-form-item label="学校:">
					<el-select  placeholder="请选择" v-model="pageForm.schoolId" clearable  @clear="closeSchool">
						<el-option  v-for="item in schList" :key="item.id" :label="item.schoolName" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="班级:">
					<el-select  placeholder="请先选择学校" v-model="pageForm.classId" clearable>
						<el-option  v-for="item in clsList" :key="item.id" :label="item.className" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="学号:">
					<el-input  placeholder="请填写用户学号" v-model="pageForm.loginName"></el-input>
				</el-form-item>
				<el-form-item label="姓名:">
					<el-input  placeholder="请填写用户姓名" v-model="pageForm.userName"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="getList">搜 索</el-button>
					<el-button  size="small" @click="resetList">重 置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="contain-table">
			<div class="tab-line">
				<div class="tab-show">序号</div>
				<div class="tab-show">账号</div>
				<div class="tab-show">姓名</div>
				<div class="tab-show">学号</div>
				<div class="tab-show">学校</div>
				<div class="tab-show">班级</div>
				<div class="tab-set">操作</div>
			</div>
			<div class="tab-body" v-for="(item,index) in list" :key="item.id">
				<div class="tab-show">{{index + 1}}</div>
				<div class="tab-show">{{item.loginName}}</div>
				<div class="tab-show">{{item.userName}}</div>
				<div class="tab-show">{{item.number}}</div>
				<div class="tab-show">{{item.schoolName}}</div>
				<div class="tab-show">{{item.className}}</div>
				<div class="tab-set">
					<el-button type="primary" text size="default" @click="openEdit(item)">编辑</el-button>
					<el-button type="danger" text size="default" @click="del(item.id)">删除</el-button>
					<el-button type="primary" text size="default" @click="res(item.id)">重置密码</el-button>
				</div>
			</div>
		</div>
		<div class="contain-footer">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					class="mt-4"
					:page-size="5"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
			/>
		</div>
	</div>
	
	<el-dialog
			v-model="editDialog"
			title="编辑学生"
			width="30%"
	>
		<el-form>
			<el-form-item label="账号:">
				<el-input v-model="editForm.loginName" placeholder="请输入账号" />
			</el-form-item>
			<el-form-item label="姓名:">
				<el-input v-model="editForm.userName" placeholder="请输入姓名" />
			</el-form-item>
			<el-form-item label="学号:">
				<el-input v-model="editForm.number" placeholder="请输入学号" />
			</el-form-item>
			<el-form-item label="学校:">
				<el-select  placeholder="请选择" v-model="editForm.schoolId" clearable @clear="changeEdit" >
					<el-option  v-for="item in schList" :key="item.id" :label="item.schoolName" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="班级:">
				<el-select  placeholder="请先选择学校" v-model="editForm.classId" clearable>
					<el-option  v-for="item in clsList" :key="item.id" :label="item.className" :value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="editDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitEdit">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
    import {ref,reactive,onMounted,watch} from 'vue'
	import { stuPage,delUser ,retPas,editUser} from "../api/loginMoudles";
    import {delSch, schNoPage} from "../api/schoolMoudles";
	import {classNoPage } from "../api/classMoudles";
    import {ElMessageBox, ElNotification} from "element-plus";

    const pageForm = reactive({
        classId: null,
        loginName: "",
        pageIndex: 1,
        pageSize: 5,
        roleFlag: 3,
        schoolId: null,
        userName: ""
    })
    let list = ref([])
    let total = ref(0)
	const getList = async () => {
        const { data } = await stuPage(pageForm)
        if (data.statusCode === 200){
            list.value = data.data.data
            total.value = data.data.total
        }
	}
    let schList = ref([])
	const getSch = async () => {
        const { data } = await schNoPage()
        if (data.statusCode === 200){
            schList.value = data.data
        }
	}
    let clsList = ref([])
    //分页
    const handleSizeChange = (val: number) => {
        pageForm.pageSize = val
        getList()
    }
    const handleCurrentChange = (val: number) => {
        pageForm.pageIndex = val
        getList()
    }
	//监听表单单一值变化
    watch(()=>pageForm.schoolId, async (newVal, oldVal) => {
        if (newVal){
            const { data } = await classNoPage(pageForm.schoolId)
            if (data.statusCode === 200){
                clsList.value = data.data
            }
		}
    })
   
	//删除用户
    const del = (id) => {
        ElMessageBox.confirm(
            '确定删除此学生?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
                delUser(id).then(res => {
                    if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: res.data.message,
                            type: 'success',
                        })
                        getList()
                    }
                })
            })
            .catch(() => {
            })
    }
    //重置密码
    const res = (id) => {
        ElMessageBox.confirm(
            '确定重置此密码?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
                retPas(id).then(res => {
                    if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: res.data.message,
                            type: 'success',
                        })
                        getList()
                    }
                })
            })
            .catch(() => {
            })
    }
	const closeSchool = () => {
        pageForm.schoolId = null
        pageForm.classId = null
		clsList = ref([])
	}
	const resetList = () => {
        pageForm.schoolId = null
        pageForm.classId = null
        pageForm.loginName = ""
        pageForm.userName = ""
        getList()
	}
    onMounted(() => {
        getList()
        getSch()
    })
	
	//编辑操作 ↓
    let editDialog = ref<boolean>(false)
    let editForm = ref({})
    const openEdit = (item) => {
        editForm.value.classId = item.classId
        editForm.value.id = item.id
        editForm.value.loginName = item.loginName
        editForm.value.number = item.number
        editForm.value.schoolId = item.schoolId
        editForm.value.userName = item.userName
        editDialog.value = true
    }
    //监听表单单一值变化
    watch(()=>editForm.value.schoolId, async (newVal, oldVal) => {
        console.log(newVal)
        if (newVal){
            const { data } = await classNoPage(editForm.value.schoolId)
            if (data.statusCode === 200){
                clsList.value = data.data
            }
        }
    })
	const changeEdit = () => {
        editForm.value.schoolId = null
        editForm.value.classId = null
        clsList = ref([])
	}
	const submitEdit = async  () => {
        for (let key in editForm.value){
            console.log(editForm.value[key])
			if (!editForm.value[key]){
			    return  ElNotification({
                    title: '提 示',
                    message: '请将学生信息填写完整',
                    type: 'error',
                })
			}
		}
        const { data } = await editUser(editForm.value)
       if (data.statusCode === 200) {
           ElNotification({
               title: '提 示',
               message: data.message,
               type: 'success',
           })
           editDialog.value = false
           editForm.value = {}
           await getList()
	   }
	}
</script>

<style scoped lang="less">
	.contain{
		position: relative;
		width: 100%;
		height: 100%;
		.contain-header{
			margin-bottom: 20px;
			display: flex;
			justify-content: flex-end;
		}
		.contain-table{
			margin: 0 auto 20px;
			width: 90%;
			.tab-line{
				width: 100%;
				display: flex;
				margin-bottom: 20px;
				align-items: center;
				padding: 0 20px;
				box-sizing: border-box;
				justify-content: space-between;
				.tab-show{
					width: 13%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
				.tab-set{
					width: 22%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
			}
			.tab-body{
				width: 100%;
				display: flex;
				margin-bottom: 10px;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 20px;
				border-radius: 20px;
				box-sizing: border-box;
				.tab-show{
					width: 13%;
					text-align: center;
					font-size: 16px;
					color: #333;
				}
				.tab-set{
					width: 22%;
					text-align: center;
				}
			}
		}
		.contain-footer{
			position: absolute;
			bottom: 5%;
			left: -50%;
			transform: translateX(50%);
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
